<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入c标签 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 引入分页标签 -->
<%@ taglib prefix="bp" uri="/MyPager-tag"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>商品首页</title>
<link href="static/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="static/css/taobao.css" rel="stylesheet" />
	<!-- 引入分页样式  -->
	<link href="static/css/pager.css" rel="stylesheet" />
</head>
<script src="static/jquery/jquery.min.js"></script>
<script src="static/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
	window.onload = function(){

		//获取一级类型
		var fTypes = document.getElementsByName("fType");
		for(var i=0;fTypes.length;i++){
			if(fTypes[i].id == "${firstCode}"){
				fTypes[i].className = "list-group-item active";
			}
		}
	}
</script>
<body>
	
	<!-- 横幅导航条结束 -->
	<jsp:include page="/WEB-INF/view/common/nva.jsp"></jsp:include>
	<!--  横幅下方的主体开始 -->
	<div class="container">
		<div class="row row-offcanvas row-offcanvas-right">
			<!-- 侧边导航开始 -->
			<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"
				role="navigation">
				<div class="list-group">
				   <c:forEach items="${firstTypes}" var="type">
				        <a href="index?typeCode=${type.code}" name="fType" id="${type.code}"
						class="list-group-item">${type.name}</a> 
				   </c:forEach>
					
						
				</div>
			</div>
			<!--  侧边导航结束 -->
			<!-- 内容主体开始 -->
			<div class="col-xs-12 col-sm-9">
				<p class="pull-right visible-xs">
					<button type="button" class="btn btn-primary btn-xs"
						data-toggle="offcanvas">显示导航条</button>
				</p>
				<div class="alert alert-info" role="alert">

                    <c:forEach items="${secodeTypes}" var="type">
                       <a href="index?typeCode=${type.code}"
						class="btn btn-default">${type.name}</a>
                    </c:forEach>
					

					<div>
						<form action="index" method="get">
							 <input name="keyword" value="${keyword}" />
							<button type="submit">搜索</button>
						</form>
					</div>
				</div>

				<div class="row">
				    
				    <c:forEach items="${articles}" var="article">
				        <div class="col-xs-6 col-lg-4">
						<span class="thumbnail"> 
						<a href="detail?id=${article.id}">
								<img style="width:200px;height:200px" src="static/image/article/${article.image}" alt="...">
								<p style="height: 20px; overflow: hidden;">
								    ${article.title}
								</p>
						</a>
							<p>
								<span class="price">${article.price}</span>
                                 <font color="red">折后价格：${article.price  * article.discount}</font>
							</p>
						</span>
					</div>
				    </c:forEach>
					<!--/.col-xs-6.col-lg-4-->

				</div>
				<!--/row-->


				<!-- p2是url前段部分pageNumber=之前 -->


				<!--  分页开始 -->
				<bp:pager pageIndex="${pageModel.pageIndex}" pageSize="${pageModel.pageSize}" pageStyle="black" totalNum="${pageModel.totalNum}" submitUrl="index?pageIndex={0}&keyword=${keyword}&typeCode=${typeCode}"></bp:pager>
                <!--
				<div class="row">
					<nav>
						<ul class="pagination">
							<div>
								<a href="javascript:goPage(1)">首页</a> <a
									href='javascript:goPage(1)'>上一页</a> <a
									href='javascript:goPage(2)'>下一页</a> <a
									href='javascript:goPage(7)'>尾页</a> &nbsp; <span>第&nbsp;
									1&nbsp;页/共&nbsp; 7页 ，共 52 条数据 </span>
							</div>
						</ul>
				</div> -->
				<!-- 分页结束 -->
			</div>
			<!--/.col-xs-12.col-sm-9-->
			<!-- 内容主体结束 -->
		</div>
		<!--/row-->
		<hr>
		<footer>
			<p>&copy; 版权所有，欢迎借鉴</p>
		</footer>
	</div>
</body>
</html>